<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中CSS动画效果</title>
    <script src="vue.js"></script>
    <style>

        .fa-enter,.fa-leave-to{
            opacity: 0;
            transform: translateX(100px);
        }
        .fa-enter-active,.fa-leave-active{
            transition: all 1s ease;
            position: absolute;
        }
    </style>
</head>
<body>
    <!--    默认前缀 v-enter
        将要实现动画效果的 DOM 节点用 transition 标签包裹起来，可添加 name 属性；
        若没有 name 属性，则默认的 class 前缀为 v

        transition动画过度原理
        v-enter{ opacity： 0}    v-enter-active{transition:opacity 3s}
        动画执行之前vue会在被<transition>包裹的组件上添加两个类
          <div class="v-enter v-enter-active"></div>

          显示：开始：v-enter v-enter-active（o=0） →第二帧 v-enter-to v-enter-active(o=1) →两个类消失
            v-enter-active存在于整个动画执行的过程中
            v-enter在动画开始时存在，动画执行到第二帧v-enter类被移除
            v-enter-to出现，opacity变成1, v-enter-active监听到这个变化，并用三秒完成
          隐藏：开始：v-leave v-leave-active（o=1） →第二帧 v-leave-to v-leave-active(o=0) →两个类消失
            v-leave-active存在于整个动画执行的过程中
            v-leave在动画开始时存在，动画执行到第二帧v-leave类被移除
            v-leave-to出现，opacity变成0, v-enter-active监听到这个变化，并用三秒完成
            -->

        <div id="root">
            <transition name="fa">
                <div v-if="show">hello world </div>
            </transition>

            <button @click="handleClick">{{change}}</button>
        </div>

        <script>

            var vm = new Vue({
                el:"#root",
                data:{
                    show:true,
                    change:"隐藏"
                },
                methods:{
                    handleClick:function () {
                        this.show = !this.show;
                        this.change =  this.change ==="隐藏" ?"显示":"隐藏"
                    }
                }

            })
        </script>
</body>
</html>